"use client";

import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ArrowRight } from "lucide-react";

export function CtaSection() {
  return (
    <section className="py-12 md:py-20 fishing-gradient text-white">
      <div className="container px-4 md:px-6">
        <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
          <motion.div
            className="space-y-4"
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
              加入我们的钓鱼社区
            </h2>
            <p className="max-w-[600px] md:text-xl">
              订阅我们的新闻通讯，获取最新产品信息、钓鱼技巧和独家优惠。
            </p>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <div className="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
              <div className="flex-1">
                <Input 
                  type="email" 
                  placeholder="输入您的邮箱" 
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/70 h-12"
                />
              </div>
              <Button className="bg-white text-primary hover:bg-white/90 h-12">
                订阅
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </div>
            <p className="mt-3 text-sm text-white/70">
              我们尊重您的隐私，不会向第三方分享您的信息。
            </p>
          </motion.div>
        </div>
      </div>
    </section>
  );
}